<template>
  <div class="layout-container">
    <div class="layout-container-form" style="flex-direction: column">
      <div class="layout-container-form-search">
        <el-row style="text-align: left">
          <el-col :span="24">
            <el-form label-width="90px" :inline="true">
              <el-form-item label="姓名：">
                <el-input
                  v-model="query.real_name"
                  placeholder="请输入姓名"
                  style="width: 100%"
                  @keyup.enter="getTableData(true)"
                ></el-input>
              </el-form-item>
              <el-form-item label="注册时间：">
                <el-date-picker
                  v-model="query.registration_date"
                  type="datetimerange"
                  prefix-icon="el-icon-date"
                  range-separator="→"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                />
              </el-form-item>
              <el-form-item label="团队编号：">
                <el-input
                  v-model="query.team_number"
                  placeholder="请输入团队编号"
                  style="width: 100%"
                  @keyup.enter="getTableData(true)"
                ></el-input>
              </el-form-item>
              <el-form-item label="上传率：" class="upload-rate">
                <el-input-number
                  v-model="query.upload_rate"
                  placeholder="请输入上传率"
                  :min="0"
                  :max="999999999999"
                  :precision="0"
                  controls-position="right"
                  style="width: 100%"
                  @keyup.enter="getTableData(true)"
                ></el-input-number>
                <span class="upload-rate-icon">%</span>
              </el-form-item>
              <el-form-item label="累计领取：">
                <div class="query-number-input-range">
                  <el-input-number
                    v-model="query.get_start"
                    :min="0"
                    :max="999999999999"
                    :precision="0"
                    controls-position="right"
                    style="width: calc(50% - 9px)"
                    placeholder="开始"
                  />
                  <div class="split-input-line">→</div>
                  <el-input-number
                    v-model="query.get_end"
                    :min="0"
                    :max="999999999999"
                    :precision="0"
                    controls-position="right"
                    style="width: calc(50% - 9px)"
                    placeholder="结束"
                  />
                </div>
              </el-form-item>
              <el-form-item label="累计上传：">
                <div class="query-number-input-range">
                  <el-input-number
                    v-model="query.submit_start"
                    :min="0"
                    :max="999999999999"
                    :precision="0"
                    controls-position="right"
                    style="width: calc(50% - 9px)"
                    placeholder="开始"
                  />
                  <div class="split-input-line">→</div>
                  <el-input-number
                    v-model="query.submit_end"
                    :min="0"
                    :max="999999999999"
                    :precision="0"
                    controls-position="right"
                    style="width: calc(50% - 9px)"
                    placeholder="结束"
                  />
                </div>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="24" style="text-align: right;">
              <el-button
                class="search-btn"
                @click="resetSearch"
                >{{ $t("message.common.reset") }}</el-button
              >
              <el-button
                type="primary"
                class="search-btn"
                style="margin-right:0;"
                @click="getTableData(true)"
                >{{ $t("message.common.search") }}</el-button
              >
          </el-col>
        </el-row>
      </div>
      <div class="layout-container-opt">
        <el-row>
          <el-col :span="24" >
            <!-- "0" 全部权限 1查看权限 2上传权限 3 下载权限 -->
            <el-button
              v-if="adminInfo.admin_type < 2"
              :type="selectData.length > 0 ? 'primary' : ''"
              :disabled="selectData.length === 0"
              :loading="exportBatchLoading"
              @click="exportProjectAnalysisFun(1)">
              批量导出数据
            </el-button>
            <el-button
              type="primary"
              v-if="adminInfo.admin_type < 2"
              :loading="exportAllLoading"
              @click="exportProjectAnalysisFun(2)">
              导出全部数据
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="layout-container-table">
      <Table
        ref="table"
        v-model:page="page"
        v-loading="loading"
        :showSelection="true"
        :data="tableData"
        :showIndex="true"
        @getTableData="getTableData"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column prop="index" label="序号" align="center" width="80" /> -->
        <el-table-column prop="team_number" label="团队编号"/>
        <el-table-column prop="user_id" label="账号ID"/>
        <el-table-column prop="real_name" label="姓名" width="120" />
        <el-table-column prop="join_date" label="注册时间" width="150">
          <template #default="scope">
          {{dateFormat(scope.row.join_date)}}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="150">
        </el-table-column>
        <el-table-column prop="project_id" label="项目ID"/>
        <el-table-column prop="get" label="累计领取">
        </el-table-column>
        <el-table-column prop="submit" label="累计上传">
        </el-table-column>
        <el-table-column prop="give_up" label="累计放弃">
        </el-table-column>
        <el-table-column prop="sg" label="上传率">
          <template #default="scope">
            {{scope.row.sg}}%
          </template>
        </el-table-column>
      </Table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { Page } from "@/components/table/type";
import { ElMessage, ElMessageBox } from "element-plus";
import Table from "@/components/table/index.vue";
import { getProjectAnalysis, exportProjectAnalysis } from "@/api/service/user.ts";
import { exportExcel } from "@/api/service/project.ts";
import { dateFormat } from "@/utils/index.ts"
import { useStore } from "vuex";
const store = useStore();
const adminInfo = reactive(store.state.user.adminInfo);

// 存储搜索用的数据
const query = reactive({
  get_start: undefined, // 累计领取开始
  get_end: undefined, // 累计领取结束
  get: [], // array[integer]
  submit_start: undefined, // 累计放弃开始
  submit_end: undefined, // 累计放弃结束
  submit: [], // array[integer]
  real_name: '', // string
  registration_date: [], //array[string]
  team_number: '', // string
  upload_rate: undefined, // number
});
// 状态
const uplaodRateOptions = ref([
  {
    label: '已上线',
    value: 1
  },
  {
    label: '已下线',
    value: 0
  }
])
// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 50,
  total: 0,
});
// 重置
const resetSearch = () => {
  query.get_start = undefined; // 累计领取开始
  query.get_end = undefined; // 累计领取结束
  query.get = []; // array[integer]
  query.submit_start = undefined; // 累计放弃开始
  query.submit_end = undefined; // 累计放弃结束
  query.submit = []; // array[integer]
  query.real_name = ''; // string
  query.registration_date = []; // array[string]
  query.team_number = ''; // string
  query.upload_rate = undefined; // number
  getTableData(true);
}
const loading = ref(false);
const tableData = ref([]);
// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = (init: Boolean) => {
  
  if (init) {
    page.index = 1;
  }
  console.log(query.get_start, query.get_end)
  let get_arr = []
  if ((query.get_start == undefined && query.get_end != undefined)) {
    ElMessage.error('请输入累计领取开始值')
    return
  }
  if ((query.get_start != undefined && query.get_end == undefined)) {
    ElMessage.error('请输入累计领取结束值')
    return
  }
  if (query.get_start > query.get_end) {
    ElMessage.error('累计领取开始值不能大于结束值')
    return
  }
  get_arr = [query.get_start, query.get_end]
  if (query.get_start == undefined && query.get_end == undefined) {
    get_arr = []
  } 
 

  let submit_arr = []
  if ((query.submit_start == undefined && query.submit_end != undefined)) {
    ElMessage.error('请输入累计上传开始值')
    return
  }
  if ((query.submit_start != undefined && query.submit_end == undefined)) {
    ElMessage.error('请输入累计上传结束值')
    return
  }
  if (query.submit_start > query.submit_end) {
    ElMessage.error('累计上传开始值不能大于结束值')
    return
  }
  submit_arr = [query.submit_start, query.submit_end]
  if (query.submit_start == undefined && query.submit_end == undefined) {
    submit_arr = []
  } 
  

  loading.value = true;
  let params = {
    page: page.index,
    page_size: page.size,
    
    get: get_arr, // array[integer]
    submit: submit_arr, // array[integer]
    real_name: query.real_name, // string
    registration_date: query.registration_date, //array[string]
    team_number: query.team_number, // string
    upload_rate: query.upload_rate != undefined ? query.upload_rate : undefined, // number
  };
  

  getProjectAnalysis(params)
    .then((res: any) => {
      let data = res.data.list;
      data.forEach((d: any) => {
        d.loading = false;
      });

      tableData.value = data;
      page.total = Number(res.data.count);
      saveExportQuert(get_arr, submit_arr);
    })
    .catch(() => {
      tableData.value = [];
      page.index = 1;
      page.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 存储搜索条件用于导出
const saveExportQuert = (get_arr:any, submit_arr:any) => {
  saveQuery.get = get_arr
  saveQuery.submit = submit_arr
  saveQuery.real_name = query.real_name
  saveQuery.registration_date = query.registration_date
  saveQuery.team_number = query.team_number
  saveQuery.upload_rate = query.upload_rate
  localStorage.setItem('saveQuery', JSON.stringify(saveQuery))
}

// 批量导出
const saveQuery = reactive({
  get: [], // array[integer]
  submit: [], // array[integer]
  real_name: '', // string
  registration_date: [], //array[string]
  team_number: '', // string
  upload_rate: undefined, // number
})
const selectData = ref([]);
const exportBatchLoading = ref(false);
const exportAllLoading = ref(false);
const exportProjectAnalysisFun = (type: Number) => {
  let data = {}
  // type: 2 导出全部 不用传参数
  if (type === 1) {
    let saveQueryObj = JSON.parse(localStorage.saveQuery)
    data = {
      ...saveQueryObj,
      user_project_ids: selectData.value
    }
    exportBatchLoading.value = true
  } else if (type === 2) {
    exportAllLoading.value = true
  }
  
  exportProjectAnalysis(data).then((res: any) => {
    if (res.code === 200 && res.data) {
      if (type === 1) {
        exportBatchLoading.value = false
      } else if (type === 2) {
        exportAllLoading.value = false
      }
      window.open(res.data)
      ElMessage.success("导出成功！")
    } else {
      ElMessage.success("导出失败！")
    }
  }).finally(() => {
    if (type === 1) {
      exportBatchLoading.value = false
    } else if (type === 2) {
      exportAllLoading.value = false
    }
  })
}

// 勾选数据
const handleSelectionChange = (data: any) => {
  selectData.value = [];
  data.forEach((item) => {
    selectData.value.push(item.up_index)
  })
};

getTableData(true);
</script>

<style lang="scss" scoped>
.layout-container-form {
  position: relative;
}

.layout-container-form-search {
  width: 100%;
  display: inline-block !important;
  justify-content: flex-start !important;
  .search-btn{
    margin-right: 10px;;
  }
}
.layout-container-opt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  margin-top: 10px;
}
.split-line{
  margin: 0 8px;
  color: #ccc;
}
.image-slot{
  width: 50px;
  height: 50px;
  background: #fafafa;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
}
.query-number-input-range{
  display: flex;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  justify-content: space-between;
  :deep(.el-input__inner){
    border:none;
    padding-left: 0;
    padding-right: 0;
  }
  :deep(.el-input-number__increase){
    display: none;
  }
  :deep(.el-input-number__decrease){
    display: none;
  }
  .split-input-line{
    display: inline-block;
    width: 18px;
    text-align: center;
    font-size: 12px;
  }
}
.upload-rate{
  position: relative;
  .upload-rate-icon{
    position: absolute;
    right: 10px;
    top: 0px;
    color: #666;
    display: none;
  }
  :deep(.el-input__inner){
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
  }
  :deep(.el-input-number__increase){
    display: none;
  }
  :deep(.el-input-number__decrease){
    display: none;
  }
}

</style>
